<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.bootcdn.net/ajax/libs/iview/3.5.5-rc.1/styles/iview.min.css" rel="stylesheet">
<link rel="stylesheet" href="__CBTCSS__/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="__CBTCSS__/font-awesome/5.12.1/css/all.min.css">
<title>文章创作 - MZBlog</title>
</head>

<body class="bg-light">

  <div class="container-lg" id="app">
    <div class="row">
      <div class="input-group input-group-lg">
        <div class="input-group-prepend">
          <button class="btn btn-outline-secondary" type="button" onclick="window.location.href='http://127.0.0.1:8080/admin/#/admin/article/list';">
            <i class="fa fa-chevron-left" aria-hidden="true"></i> 文章管理
          </button>
        </div>
        <input class="sr-only" id="article_id" type="text" value="{$article.akey}" />
        <input type="text" id="article_title" class="form-control" placeholder="请输入标题" value="{$article.title}">
        <div class="input-group-append">
          <button class="btn btn-small btn-success" type="button" @click="onSubmit">保存文章</button>
        </div>
      </div>

    </div>
  </div>



  <div class="container">
    <div class="row d-block">
      <textarea class="sr-only" name="content" id="editor">
        {$article.content_html}
      </textarea>
    </div>
  </div>

</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/iview/3.5.5-rc.1/iview.min.js"></script>

<script type="text/javascript" src="__CBTCSS__/jquery/3.4.1/jquery.min.js"></script>
<script src="__BTBLOG__/ckeditor5/ckeditor.js"></script>
<script src="__BTBLOG__/ckeditor5/translations/zh-cn.js"></script>

<script>
  function preservation(){
    $id = $("#article_id").val();
    $title = $("#article_title").val();
    $testh = myEditor.getData();
  
    $.post("{:url('article/preservation')}",
    {
        articleId : $id,
        title     : $title,
        test_html : $testh,
        editor    : 'ck',
    },
    function(data,status){
      if(data.state=='insert'){
        alert(data.str);
        $("#article_id").val(data.articleId);
        window.location.href="/article/writer?articleId="+data.articleId;
      }else if(data.state=='success'){
        alert(data.str);
      }else if(data.state=='error'){
        alert("Server return\n数据: "+ data.str +"\n状态: " + data.state);
      }else{
        alert('服务器啥也没返回？');
      }
    });
  }
  </script>

<script>
  var app = new Vue({
    el: '#app',
    data() {
      return {
        // 指定编辑的资源ID 0.新增 其他.指定的资源ID
        editId: 0,
        // 页面级加载等待
        loading: false,
        // 文章数据
        postForm: {
            title: '',
            content: '',
            content_html: '',
            code_style: 'monokai-sublime', // markdown样式
            editor_type: 'ckeditor',
            status: 5,
        },

        // ######################################################################################################################
  
        // 编辑器高度
        editorHeight: document.body.clientHeight - 56,
        // 屏幕宽度
        screenWidth: document.body.clientWidth,
  
        // ######################################################################################################################
  
        // 编辑器实例
        editor: null,
  
      }
    },
    watch:{
      screenWidth(val){
        // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
        if(!this.timer){
          // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
          this.screenWidth = val
          this.timer = true
          setTimeout(() => {
            this.timer = false
          },400)
        }
      }
    },
    mounted() {
      window.onresize = () => {
        return this.screenWidth = document.body.clientWidth
      }
      this.initCKEditor()
      this.editId = this.$route.params.id ? this.$route.params.id : 0
      if(this.editId) {
        this.getFormData()
      }
    },
    methods: {
      // 初始化编辑器
      initCKEditor () {
        ClassicEditor.create( document.querySelector( '#editor' ), {
          // removePlugins: [ 'Heading', 'Link' ],
          // toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ],
          heading: {
            options: [
              { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
              { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
              { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
            ]
          },
          language : 'zh-cn',
          ckfinder: {
            uploadUrl: '/article/ckeditor5/upload',
          },
        })
        .then(editor => {
          this.editor = editor;
        })
        .catch( error => {
          console.error( error );
        });
      },

      // 提交表单
      onSubmit() {
        if(this.postForm.title == '') {
          this.$Message.warning('文章标题不能为空')
          return
        }
        if(this.editId) {
          this.handleUpdate(true)
        } else {
          this.handleStore()
        }
      },



  
      // ######################################################################################################################
      // # 
      // ######################################################################################################################
  
      // 跳转到文章列表页
      toArticleList() {
          this.$router.push({ path: '/admin/article/list' })
      },
  
    }
  })
  </script>